<template>
	<view>
		<view v-if="cardData.type<=4">
			<view class="bank-item" :class="'bank-item'+cardData.type">
				<view class="bank-head">
					<!-- <view class="bank-info">
						<text class="bank-name">{{cardData.name}}</text>
					</view> -->
				</view>
				<view class="card-code">
					<text class="card-number">{{cardData.sum}}张</text>
				</view>
				<view v-if="cardData.id!=0" class="btn-view">
					<view class="btn-excw" @tap="onOpen(cardData)">
						打开
					</view>
					<view class="btn-exc" v-if="cardData.sum>4" @tap="onComp(cardData.type)">
						合成
					</view>
				</view>
				<view v-else>
					<view class="btn-excw">
						待结算
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="bank-item" :class="'bank-item'+cardData.type">
				<view class="bank-head">
					<view class="bank-info">
						<text class="bank-name">{{cardData.name}}</text>
					</view>
				</view>
				<view class="card-code">
					<text class="card-number">{{cardData.sum}}个</text>
				</view>
				<view class="btn-view">
					<view class="btn-open" @tap="onOpen(cardData)">
						开启
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'cardItem',
		props: {
			cardData: {
				type: Object,
				default: {
					sum: 1,
					name: "",
					type: 1
				}
			},
		},
		data() {
			return {
				show: false,
			};
		},
		methods: {
			onComp(type) {
				// console.log(type);
				let that = this;
				if (parseInt(type) <= 4) {
					uni.showModal({
						title: '提示',
						content: '确定合成礼盒吗？',
						success: function(res) {
							if (res.confirm) {
								that.onCompCard(type);
							}
						}
					});
				}
			},
			onOpen(item) {
				// console.log(type);
				let that = this;
				let type = item.type;
				if (parseInt(type) <= 4) {
					uni.showModal({
						title: '提示',
						content: '开启可将获得：(' + item.bean + "趣豆和" + item.coupon + "兑换券)",
						success: function(res) {
							if (res.confirm) {
								that.openGameCard(type); //点击确定之后执行的代码
							}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '开启可将获得：(' + item.bean + "趣豆和" + item.coupon + "兑换券)",
						success: function(res) {
							if (res.confirm) {
								that.openGameCard(type); //点击确定之后执行的代码
							}

						}
					});
				}
			},
			openGameCard(type) {
				this.$emit(
					'openCard', {
						detail: {
							type: type
						}
					}, {}
				);
			},
			onCompCard(type) {
				this.$emit(
					'compCard', {
						detail: {
							type: type
						}
					}, {}
				);
			}
		},
		created() {

		}
	};
</script>

<style>
	.omit {
		font-size: 48rpx;
		margin-right: 30rpx;
	}

	.card-code {
		margin-top: 35rpx;
		display: inline-block;
		width: 50%;
		vertical-align: middle;
		justify-content: flex-end;
		color: #FFFFFF;
		font-size: 38rpx;
		text-align: right;

	}

	.flex-1 {
		flex: 1;
	}

	.card-type {
		font-size: 24rpx;
		color: #F1F1F1;
	}

	.bank-name {
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.bank-info {
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
	}

	.bank-head {
		display: inline-block;
		width: 50%;
		vertical-align: middle;
		align-items: center;
	}

	.bank-head .card-number {
		width: 100rpx;
		height: 100rpx;
		padding: 15rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
		font-size: 30rpx;
		overflow: hidden;
	}

	.card-number>span {
		font-size: 60rpx;
		color: #ff6839;
	}

	.bank-item {
		position: relative;
		flex: 1;
		height: 180rpx;
		margin: 6rpx;
		position: relative;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.btn-view {
		/* width: 100%; */
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 28rpx
	}

	.btn-exc {
		opacity: 0.85;
		width: fit-content;
		display: inline-block;
		vertical-align: middle;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		margin: 0 10rpx;
		color: #67c23a;
		background: #f0f9eb;
		border-color: #c2e7b0;
	}

	.btn-excw {
		opacity: 0.85;
		width: fit-content;
		display: inline-block;
		vertical-align: middle;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		color: #f56c6c;
		background: #fef0f0;
		border-color: #fbc4c4;
	}

	.btn-open {
		opacity: 0.85;
		width: fit-content;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		color: #e6a23c;
		background: #fdf6ec;
		border-color: #f5dab1;
	}

	.bank-item1 {
		background-image: url('http://yinjia.oss-cn-beijing.aliyuncs.com/haizili/1_c.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bank-item2 {
		background-image: url('http://yinjia.oss-cn-beijing.aliyuncs.com/haizili/2_c.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bank-item3 {
		background-image: url('http://yinjia.oss-cn-beijing.aliyuncs.com/haizili/3_c.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bank-item4 {
		background-image: url('http://yinjia.oss-cn-beijing.aliyuncs.com/haizili/4.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bank-item5 {
		background-image: url('http://yinjia.oss-cn-beijing.aliyuncs.com/haizili/1_card.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bank-item6 {
		background-image: url('http://yinjia.oss-cn-beijing.aliyuncs.com/haizili/2_card.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bank-item7 {
		background-image: url('http://yinjia.oss-cn-beijing.aliyuncs.com/haizili/3_card.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bank-item8 {
		background-image: url('http://yinjia.oss-cn-beijing.aliyuncs.com/haizili/4_h.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bank-item:after {
		content: "";
		display: block;
		background: inherit;
		filter: blur(10rpx);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 10rpx;
		left: 10rpx;
		z-index: -1;
		opacity: 0.4;
		transform-origin: 0 0;
		border-radius: inherit;
		transform: scale(1, 1);
	}
</style>
